iT邦幫忙

3

VScode 剛載完的必備擴充功能

  • 分享至 

  • xImage
  •  

各位在剛載好VScode都會做甚麼樣的設定或安裝甚麼擴充功能呢?
雖然網路上一大堆的介紹,但零零總總,我也是找各個網站找了許久。
在這邊就總和一下我覺得最初載好應該要有的設定吧!

1.改成中文版介面

Chinese (Traditional) Language Pack for Visual Studio Code

https://ithelp.ithome.com.tw/upload/images/20201108/20123321pqyQiEpijQ.png

VScode載好後只支持中文版,載了這個以後就可以把程式碼以外的基本功能翻譯成中文啦。
不過載好後可不會直接變成中文,請先輸入Ctrl + Shift + P 上邊就會跳出框框,這時在裡面輸入 configure display language並按下Enter,這時候會問你要哪個語言,再輸入zh-tw就行囉!


2.讓VScode自動換行

快捷鍵: Alt + Z
手動: 一般預設為off,改成on就可以了

  1. 檔案-->喜好設定-->設定
    https://ithelp.ithome.com.tw/upload/images/20201108/201233215yBNS59ods.png

2.輸入editor.wordWrap
https://ithelp.ithome.com.tw/upload/images/20201108/20123321GVf1otRCn9.png


3.按住Ctrl + 滑鼠滾輪 就能縮放字體

如果要把介面以及畫面大小都變大,Ctrl + "+"Ctrl + "-"就可以了
但如果只想縮放字體大小的話就要設定一下了:
1.和上面一樣。檔案-->喜好設定-->設定
https://ithelp.ithome.com.tw/upload/images/20201108/201233210Zs1KCO23M.png

2.輸入editor.mouseWheelZoom-->打勾
https://ithelp.ithome.com.tw/upload/images/20201108/20123321SnQmANSlAc.png


4.自動更新

裡面有四個選項,這個也就見仁見智了,每個人喜好不一樣,要選取什麼樣的自動更新,選項也有寫
1.同上
2.輸入files.autoSave
https://ithelp.ithome.com.tw/upload/images/20201108/20123321VkDfk7qiMg.png

5.中文假字(lorem)

Chinese Lorem

安裝後只要輸入ctlorem就會有中文版的假字啦

https://ithelp.ithome.com.tw/upload/images/20201108/20123321RrIzoShh5T.png


6.假圖

Lorem Picsum photos snippets

安裝後只要輸入picsum就會有假圖啦!

https://ithelp.ithome.com.tw/upload/images/20201108/20123321aMdWk5MH4c.png


7.區分巢狀括號

Bracket Pair Colorizer 2

打了很多程式碼,要是遇到一堆括號,有可能會分不清,這個擴充功能就是要把這些不同組的括號用不同顏色區分!

https://ithelp.ithome.com.tw/upload/images/20201108/20123321UZMsY2Z96c.png
https://ithelp.ithome.com.tw/upload/images/20201108/20123321WWVIk4A5b3.png


8.變更不同語言檔案的icon

Material Icon Theme

像css、jacascript 有很多種不同類型的檔案,這寫檔案在vscode裡面是沒有內建這麼多圖案的,安裝這個可以讓人更好辨認是甚麼樣類型的檔案。
https://ithelp.ithome.com.tw/upload/images/20201108/20123321DX09ZQqPZV.png


9.同時刪除元素頭尾

Auto Rename Tag

比如我打<div></div>
那麼我刪除v,他就會一起變成<di></di>
要加s?,那麼他就會一起變成<dis></dis>
只要刪除一邊,另一邊會跟著一起換

https://ithelp.ithome.com.tw/upload/images/20201108/20123321elQMhsCcyF.png


10.程式碼與網頁畫面-同步化

Preview on Web Server

如果是新建立的檔案記得要先把檔案關閉,並拖拉有那個檔案的資料夾到VScode裡面,這樣才有辦法使用這個功能哦!
對著檔案點下滑鼠右鍵,最下面兩個就是囉!一個是在VScode裡面打開,另一個是打開在網頁上,兩種都是同步的,很方便吧!

想打開到網頁上-->快捷鍵:Ctrl + Shift + L
想打開到VScode上-->快捷鍵:Ctrl + Shift + V

https://ithelp.ithome.com.tw/upload/images/20201108/20123321uZ9XaQaINy.png


11.更多不同顏色,更好辨認

老實說一開始真的蠻不習慣的,但用了一兩天後發現真的比較不會眼花,多點顏色反而比較好辨認程式碼!

indent-rainbow

https://ithelp.ithome.com.tw/upload/images/20201108/20123321Dg5lppjTCs.png


希望這些有幫助到一些新手,能省掉更多麻煩!!!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0

感謝分享
♐1130610(一)0834

我要留言

立即登入留言